<template>
    <div>
        <van-row>
            <van-col span="24" style="text-align: center">
                <img :src="logoImgUrl"/>
            </van-col>
            <van-col span="24">
                <van-field v-model="mobile" center clearable label="手机号" placeholder="请输入手机号"
                           :error-message="mobileErrorMsg"/>
                <van-field v-model="sms" center clearable label="短信验证码" placeholder="请输入短信验证码"
                           :error-message="smsErrorMsg">
                    <van-button v-if="show" slot="button" size="small" type="primary" @click="sendSms">发送验证码
                    </van-button>
                    <van-button v-if="!show" slot="button" size="small" type="primary">{{count}} s</van-button>
                </van-field>
            </van-col>
            <van-col span="24">
                <div style="margin-top: 50px">
                    <van-button type="primary" style="width: 100%" @click="doSubmit">立即绑定</van-button>
                </div>
            </van-col>
        </van-row>
    </div>
</template>

<script>
    import logoImgUrl from "../assets/logo.png"

    const TIME_COUNT = 60;
    const mobile_re = /^1\d{10}$/;
    const sms_re = /^\d{6}$/;

    export default {
        data() {
            return {
                mobile: '',
                mobileErrorMsg: null,
                sms: '',
                smsErrorMsg: null,
                openid: '',
                show: true,
                count: '',
                timer: null,
                logoImgUrl: logoImgUrl
            }
        },
        methods: {
            sendSms() {
                if (!mobile_re.test(this.mobile)) {
                    this.mobileErrorMsg = '请填写正确的手机号格式'
                    return;
                }

                this.mobileErrorMsg = null;
                this.smsErrorMsg = null;

                this.$api.wechatmp.send_sms(this.mobile).then(result => {
                    if (result.code == 1) {
                        if (!this.timer) {
                            this.count = TIME_COUNT;
                            this.show = false;
                            this.timer = setInterval(() => {
                                if (this.count > 0 && this.count <= TIME_COUNT) {
                                    this.count--;
                                } else {
                                    this.show = true;
                                    clearInterval(this.timer);
                                    this.timer = null;
                                }
                            }, 1000)
                        }
                    } else {
                        this.smsErrorMsg = result.msg
                    }
                }).catch(e => {
                    this.smsErrorMsg = '发送验证码失败'
                });
            },
            doSubmit() {
                if (!mobile_re.test(this.mobile)) {
                    this.mobileErrorMsg = '请填写正确的手机号格式'
                    return;
                }

                if (!sms_re.test(this.sms)) {
                    this.smsErrorMsg = '请填写正确的手机验证码'
                    return;
                }


                this.$api.wechatmp.do_bind({
                    mobile: this.mobile,
                    sms_code: this.sms,
                    openid: this.openid
                }).then(result => {
                    console.log(result)
                    if (result.code == 1) {
                        this.$router.push('/wechat/bind_success')
                    } else {
                        this.$toast(result.msg);
                    }
                }).catch(e => {
                    this.$toast('绑定失败,请稍后重试');
                });
            }
        },
        mounted() {
            this.openid = this.$route.params.openid
        }
    }
</script>
